<template>
  <div class="Center">
    <div class="head">
      <van-icon @click="left" name="arrow-left" />
      <p>我的爱宠</p>

      <div class="set-up">
        <router-link to="/setup">
          <i class="iconfont">&#xe62e;</i>
        </router-link>
      </div>
    </div>

    <main>
      <!-- 个人 -->
      <div class="my">
        <div class="top">
          <div class="picture">
            <router-link to="/setup">
              <img src="../assets/img/cat2.jpg" alt="" />
            </router-link>
          </div>
          <div class="text">
            <p>{{ udata.userphone }}</p>
            <div class="vip">
              <a href="#">会员权益></a>
            </div>

            <div class="shopping">
              <a href="#">兑换商城></a>
            </div>
          </div>
        </div>

        <div class="bot">
          <ul>
            <li>
              <router-link to="/collection">
                <b>{{ collectionInfo.length }}</b>
                <span>我的收藏</span>
              </router-link>
            </li>
            <li>
              <a href="#">
                <b>0</b>
                <span>浏览记录</span>
              </a>
            </li>
            <li>
              <a href="#">
                <b>3</b>
                <span>优惠劵</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <!--状态栏 -->
      <div class="status">
        <ul>
          <li>
            <a href="#">
              <i class="iconfont">&#xe624;</i>
              <span>待付款</span>
            </a>
          </li>

          <li>
            <a href="#">
              <i class="iconfont">&#xe625;</i>
              <span>待收货</span>
            </a>
          </li>

          <li>
            <a href="#">
              <i class="iconfont">&#xe61e;</i>
              <span>评价有礼</span>
            </a>
          </li>

          <li>
            <a href="#">
              <i class="iconfont">&#xe60f;</i>
              <span>客服中心</span>
            </a>
          </li>

          <li>
            <a href="#">
              <i class="iconfont">&#xe61b;</i>
              <span>全部订单</span>
            </a>
          </li>
        </ul>
      </div>
      <!-- 账户 -->
      <div class="account">
        <ul>
          <li>
            <a href="#">
              <b>0.00</b>
              <span>余额</span>
            </a>
          </li>

          <li>
            <a href="#">
              <b>0</b>
              <span>爱宠币</span>
            </a>
          </li>

          <li>
            <a href="#">
              <b>0.00</b>
              <span>红包</span>
            </a>
          </li>

          <li>
            <a href="#">
              <i class="iconfont">&#xe60c;</i>
              <span>我的钱包</span>
            </a>
          </li>
        </ul>
      </div>
      <!-- 宠物信息 -->
      <div class="pet">
        <div class="peach">
          <div class="top">
            <h1>我的宠物</h1>
            <a href="#">查看更多></a>
          </div>
          <div class="bot">
            <div class="photo">
              <img src="../assets/img/cat.jpg" alt="" />
            </div>
            <div class="text">
              <div class="one">
                <h3>桃子</h3>
                <p>...</p>
              </div>
              <div class="two">
                <span>中华田园猫</span>
                <b>2岁</b>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 工具栏 -->
      <div class="tool">
        <div class="toolbox">
          <div class="top">
            <h1>工具与服务</h1>
            <a href="#">查看更多></a>
          </div>
          <ul>
            <li>
              <a href="">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-1_qianbao-05"></use>
                </svg>
                <span>我的钱包</span>
              </a>
            </li>

            <li>
              <a href="">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-1_tuandui-06"></use>
                </svg>
                <span>团队</span>
              </a>
            </li>

            <li>
              <a href="">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-1_qianggoumiaosha-10"></use>
                </svg>
                <span>限时秒杀</span>
              </a>
            </li>

            <li>
              <a href="">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-1_youhuiquan-33"></use>
                </svg>
                <span>优惠活动</span>
              </a>
            </li>

            <li>
              <a href="">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-daishouhuo1"></use>
                </svg>
                <span>在路上</span>
              </a>
            </li>

            <li>
              <a href="">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-1_jifenduihuan-02"></use>
                </svg>
                <span>积分兑换</span>
              </a>
            </li>

            <li>
              <a href="">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-1_tequan-03"></use>
                </svg>
                <span>特权</span>
              </a>
            </li>

            <li>
              <a href="">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-1_waimai-07"></use>
                </svg>
                <span>外送渠道</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </main>
    <Footer />
  </div>
</template>

<script>
export default {
  data() {
    return {
      udata: "",
    };
  },
  methods: {
    left() {
      this.$router.go(-1);
    },
  },
  computed: {
    collectionInfo() {
      return this.$store.state.collection.collectionList;
    },
  },
  created() {
    let List = JSON.parse(localStorage.getItem("userInfo"));
    if (List) {
      this.udata = List.userInfo;
    }
  },
};
</script>

<style src="../assets/css/Center.css" scoped></style>
